<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增餐品周期菜单')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-weekend-add" >
            <input name="weekId" type="hidden" id="weekId"/>
            <input name="categoryId" type="hidden" id="categoryId"/>
            <div class="form-group">    
                <label class="col-sm-3 control-label">日期：</label>
                <div class="col-sm-8" id="post">
                    <select id="weekend" class="form-control m-b">
                        <option value="1" text="周一">周一</option>
                        <option value="2">周二</option>
                        <option value="3">周三</option>
                        <option value="4">周四</option>
                        <option value="5">周五</option>
                        <option value="6">周六</option>
                        <option value="7">周日</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">类目：</label>
                <div class="col-sm-8" id="post2">
                    <select id="category" class="form-control m-b" th:with="category=${@category.getCategory(null)}">
                        <option th:each="category : ${category}" th:text="${category.categoryName}" th:value="${category.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">菜品：</label>
                <div class="col-sm-8" id="post3">
                    <select id="menu" class="form-control select2-multiple" autocomplete="off" multiple>
                        <option th:each="menu:${post3}" th:value="${menu.id}" th:text="${menu.menuName}" th:selected="${menu.flag}"></option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <script type="text/javascript">
        var prefix = ctx + "wechatprogram/weekend"
        $("#form-weekend-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            var weekIds = $.form.selectSelects("post");
            var weekendName = $("#weekend").find("option:selected").text();
            var categoryIds = $.form.selectSelects("post2");
            var menuIds = $.form.selectSelects("post3");
            var formdata = new FormData();
            formdata.append("weekIds", weekIds);
            formdata.append("weekendName", weekendName);
            formdata.append("categoryIds", categoryIds);
            formdata.append("menuIds", menuIds);
            $.ajax({
                url: prefix + "/add",
                data: formdata,
                type: "post",
                processData: false,
                contentType: false,
                success: function(result) {
                    $.operate.saveSuccess(result);
                }
            })
        }

        $(function() {
            $('#weekend').select2({
                placeholder:"请选择日期",
                allowClear: true
            });
        })
        $(function() {
            $('#category').select2({
                placeholder:"请选择类目",
                allowClear: true
            });
        })
        $(function() {
            $('#menu').select2({
                placeholder:"请选择菜品",
                allowClear: true
            });
        })


        // $('#menu').on('change',function(){
        //     window.selectMenu();
        // }).on('focus',function(){
        //     window.selectMenu();
        // })
        //
        // function selectMenu() {
        //     var categoryId = $('#menu option:selected') .val();//选中的值
        //     var formdata = new FormData();
        //     formdata.append("categoryId", categoryId);
        //     $.ajax({
        //         url: "/wechatprogram/menu/listByCategory",
        //         data: formdata,
        //         type: "post",
        //         processData: false,
        //         contentType: false,
        //         success: function(result) {
        //             $.operate.saveSuccess(result);
        //         }
        //     })
        // }

        // 下拉框点击事件
        $(document).ready(function() {
            $("#weekend").change(function () {
                window.selectOptions();
            });

            $("#category").change(function(){
                window.selectOptions();
            });
        })

        function selectOptions() {
            var weekendId = $('#weekend option:selected').val();
            var categoryId = $('#category option:selected').val();
            if (weekendId == '' || categoryId == '') {
                return;
            }
            $.ajax({
                url: ctx + 'wechatprogram/menu/listByCategory',
                async: false,
                type: 'post',
                data: {
                    weekendId: weekendId,
                    categoryId: categoryId
                },
                success: function (data) {
                    var t = $("#menu").empty();
                    var str  = '';
                    for ( var i = 0; i < data.data.length; i++) {
                        if (data.data[i].flag) {
                            str += "<option value=\""+data.data[i].id+"\" text=\""+data.data[i].menuName+"\" selected=\"selected\">" + data.data[i].menuName + "</option>";
                        } else {
                            str += "<option value=\""+data.data[i].id+"\" text=\""+data.data[i].menuName+"\">" + data.data[i].menuName + "</option>";
                        }
                    }
                    t.append(str);
                }
            })
        }


    </script>
</body>
</html>